
<template>
  <div>
    <div
      class="job-list"
      v-for="item in articles"
      :key="item.id"
      @click="handleSelectArticle(item.id)"
    >
      <div class="top-box">
        <div class="top">
          <div class="top-title">{{ item.title }}</div>
          <div class="top-money">{{ item.money }}</div>
        </div>

        <div class="middle-tag">
          <div class="tag">{{ item.address }}</div>
        </div>

        <div class="desprition">{{ item.desprition }}</div>
      </div>

      <div class="bottom">
        <div class="bottom-left">
          <img :src="item.cover_picture" alt="" class="circle-img" />
          <div class="conpanyName">{{ item.conpanyName }}</div>
        </div>

        <div class="bottom-right"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 职位列表
      articles: [],

      page: 1,
      size: 3,
    };
  },
  mounted() {
    // this.getArticles();
    this.getRecommendArticles();
  },
  methods: {
    // 获取职位列表 (再获取一页)
    getArticles() {
      this.$http.get(`/articles?page=${this.page}&size=3`).then((res) => {
        const { code, msg, result } = res;
        if (code == 0) {
          if (result.articles.length == 0) {
            this.$message({
              showClose: true,
              message: "没有更多了哟~",
            });
          }
          this.articles = this.articles.concat(result.articles);
        }
      });
    },
    // 获取推荐职位列表
    getRecommendArticles() {
      this.$http
        .get(`/articles?page=${this.page}&size=3&is_recommend=1`)
        .then((res) => {
          this.articles = res.result;
        });
    },
    // 点击职位列表, 跳转到职位详情页
    handleSelectArticle(id) {
      // 通过编程式导航, 跳转到 /admin/user/add 路由
      // 写法1: /admin/user/add   /开头为绝对
      // 写法2: user/add   无/为相对
      // 导航到/add组件

      this.$router.push(`/article?id=${id}`);
    },
    // 再加载一页 (5条) 职位列表
    load() {
      const loading = this.$loading({
        lock: true,
        text: "",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 1)",
      });
      this.page += 1;
      // this.articles += this.articles
      this.$nextTick(() => {
        this.getArticles();
      });

      loading.close();
    },
  },
};
</script>
<style lang="less" scoped>
.job-list {
  width: 800px;
  background-color: #ffffff;
  height: 150px;
  border-radius: 15px;
  margin-bottom: 15px;
  overflow: hidden;
  cursor: pointer;

  .top-box {
    padding: 15px;
    .top {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .top-title {
        color: #222;
        font-size: 20px;
      }
      .top-money {
        color: #fe574a;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .tag {
      width: 60px;
      text-align: center;
      background-color: #f8f8f8;
      padding: 5px;
      border-radius: 5px;
      margin: 10px 0px;
    }
    .desprition {
      font-size: 14px;
    }
  }

  .bottom {
    display: flex;
    background: linear-gradient(90deg, #cbeafd 0, #fcfbfa 100%);

    height: 50px;

    .bottom-left {
      display: flex;
      justify-content: center;
      vertical-align: middle;
      align-items: center;
      .conpanyName {
        font-size: 15px;
        margin-left: 10px;
      }
    }
    .circle-img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      margin-left: 20px;
    }
  }
}
</style>
